@extends('Layouts.iframe')
@section('content')
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 管理员管理 <span
                class="c-gray en">&gt;</span> 权限管理
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a></nav>
    <div class="page-container">
        {{-- <div class="text-c">
             <form class="Huiform" method="post" action="" target="_self">
                 <input type="text" class="input-text" style="width:250px" placeholder="权限名称" id="" name="">
                 <button type="submit" class="btn btn-success" id="" name=""><i class="Hui-iconfont">&#xe665;</i> 搜权限节点
                 </button>
             </form>
         </div>--}}
        <div class="cl pd-5 bg-1 bk-gray mt-20">
            <span class="l">
                {{--<a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i  class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> --}}
                @can('permission.create')
                <a href="javascript:;"
                   onclick="admin_permission_add('添加权限节点','{{ url('admin/permission/create')  }}','','500')"
                   class="btn btn-primary radius">
                    <i class="Hui-iconfont">&#xe600;</i> 添加权限节点</a>
                @endcan
            </span>
            <span class="r">共有节点：<strong>{{ $count }}</strong> 条</span>
        </div>
        <table class="table table-border table-bordered table-bg">
            <thead>
            <tr>
                <th scope="col" colspan="7">权限节点</th>
            </tr>
        </table>
        @if($page)

        <div class="container">
      	    <section id="main_content">
	            <ul class="sTree2 listsClass" id="sTree2">
                    <li>
                        <div>选项 a</div>
                    </li>
                    <li>
                        <div>选项 b</div>
                        <ul class="">
                            <li>
                                <div>选项 b1</div>
                            </li>
                            <li>
                                <div>选项 b2</div>
                            </li>
                            <li>
                                <div>选项 b3</div>
                            </li>
                            <li>
                                <div>选项 b4</div>
                            </li>
                            <li>
                                <div>选项 b5</div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>选项 c</div>
                        <ul class="">
                            <li>
                                <div>选项 c1</div>
                            </li>
                            <li>
                                <div>选项 c2</div>
                            </li>
                            <li>
                                <div>选项 c3</div>
                            </li>
                            <li>
                                <div>选项 c4</div>
                            </li>
                            <li>
                                <div>选项 c5</div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>选项 d</div>
                        <ul class="">
                            <li>
                                <div>选项 d1</div>
                            </li>
                            <li>
                                <div>选项 d2</div>
                            </li>
                            <li>
                                <div>选项 d3</div>
                            </li>
                            <li>
                                <div>选项 d4</div>
                            </li>
                            <li>
                                <div>选项 d5</div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>选项 e</div>
                    </li>
                    <li>
                        <div>选项 f</div>
                    </li>
                </ul>
            </section>
        </div>

        @endif
    </div>
@endsection
    <style>	
    ul, li { list-style-type:none; color:#333; border:1px solid #ddd; }
	ul.sTree, ul{ padding:0px;}
	ul.sTree2 li, ul#sortableListsBase li { padding-left:50px; margin:5px; border:1px solid #ddd;}
	li div { padding:7px;}
	li, ul, div { border-radius: 3px; }
    .red { background-color:#ff9999; }
	.blue { background-color:#aaaaff;}
	.green { background-color:#99ff99; }
	.gree2 { background-color:#bbffbb; }
	.yellow { background-color:#ff8; }
	.brown { background-color:#c26b2b; }
	.pT20 { padding-top:20px; }
	.pV10 { padding-top:10px; padding-bottom:10px; }
	.dN { display:none; }
	.zI1000 { z-index:1000; }
	.c1 { color:#b5e853; }
	.c2 { color:#63c0f5; }
	.c3 { color: #f77720; }
	.c4 { color: #888; }
	.bgC1 { background-color:#ccc; }
	.bgC2 { background-color:#ff8; }
	.small1 { font-size:0.8em; }
	.small2 { font-size:0.7em; }
	.small3 { font-size:0.6em; }
	.tAR { text-align:right; }
	.clear { clear:both; }
	img.descPicture { display:block; width:100%; margin:0 7px 30px 0; float:left; cursor:pointer; }
	img.descPicture.descPictureClose { width:150px; }
	#sTree2 { margin:10px auto; }
    </style>
@section('js')
    <script src="/js/sortable/jquery-git1.min.js"></script>
    <script src="/js/sortable/jquery-sortable-lists.min.js"></script>
    <script type="text/javascript">
        /*
         参数解释：
         title	标题
         url		请求的url
         id		需要操作的数据id
         w		弹出层宽度（缺省调默认值）
         h		弹出层高度（缺省调默认值）
         */
        /*管理员-权限-添加*/
        function admin_permission_add(title, url, w, h) {
            layer_show(title, url, w, h);
        }
        /*管理员-权限-编辑*/
        function admin_permission_edit(title, url, id, w, h) {
            layer_show(title, url, w, h);
        }

        /*管理员-权限-删除*/
        function admin_permission_del(obj, id) {
            layer.confirm('确认要删除吗？', function (index) {
                $.ajax({
                    type: 'post',
                    url: '/admin/permission/' + id,
                    dataType: 'json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {'_method': 'DELETE'},
                    success: function (data) {
                        if (data.code == 0) {
                            $(obj).parents("tr").remove();
                            layer.msg(data.message, {icon: 1, time: 1000});
                        } else {
                            $(obj).parents("tr").remove();
                            layer.msg(data.message, {icon: 2, time: 1000});
                        }
                    },
                    error: function (data) {
                        $(obj).parents("tr").remove();
                        layer.msg('出错啦', {icon: 2, time: 1000});
                    },
                });
            });
        }
    </script>

    <script type="text/javascript">
        $(function(){
            var options = {
                placeholderCss: {'background-color': '#ff8'},
                hintCss: {'background-color':'#bbf'},
                isAllowed: function(cEl, hint, target)
                {
                    if(hint.parents('li').first().data('module') === 'c' && cEl.data('module') !== 'c')
                    {
                        hint.css('background-color', '#ff9999');
                        return false;
                    }
                    else
                    {
                        hint.css('background-color', '#99ff99');
                        return true;
                    }
                },
                opener: {
                    active: true,
                    close: '/images/Remove2.png',
                    open: '/images/Add2.png',
                    openerCss: {
                        'display': 'inline-block',
                        'width': '18px',
                        'height': '18px',
                        'float': 'left',
                        'margin-left': '-35px',
                        'margin-right': '5px',
                        'background-position': 'center center',
                        'background-repeat': 'no-repeat'
                    },
                    openerClass: ''
                }
            },

            sWrapper = $('#settingsWrapper');

            $('#sTree2, #sTree').sortableLists(options);

            $('#toArrBtn').on('click', function(){ console.log($('#sTree2').sortableListsToArray()); });
            $('#toHierBtn').on('click', function() { console.log($('#sTree2').sortableListsToHierarchy()); });
            $('#toStrBtn').on('click', function() { console.log($('#sTree2').sortableListsToString()); });
            $('.descPicture').on('click', function(e) { $(this).toggleClass('descPictureClose'); });
        });
    </script>
	
@endsection